<template>
  <div class="recharge-container">
    <el-card class="recharge-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="header-title">账户充值</span>
          <span class="header-subtitle">快速充值，畅享服务</span>
        </div>
      </template>

      <el-form :model="form" label-width="130px">
        <el-form-item label="充值金额" required>
          <div class="amount-input-container">
            <el-input-number
                v-model="form.amount"
                :min="1"
                :max="10000"
                :precision="2"
                controls-position="right"
                placeholder="请输入金额"
                class="amount-input"
            />
            <span class="unit">元</span>
          </div>
          <div class="quick-amounts">
            <el-tag
                v-for="amount in quickAmounts"
                :key="amount"
                class="quick-amount-tag"
                :class="{ 'active': form.amount === amount }"
                @click="form.amount = amount"
            >
              {{ amount }}元
            </el-tag>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="handleRecharge"
              :disabled="!form.amount || form.amount <= 0"
              class="recharge-btn"
          >
            立即充值
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 支付弹窗 -->
    <el-dialog
        v-model="payDialogVisible"
        title="选择支付方式"
        width="500px"
        :close-on-click-modal="false"
        class="payment-dialog"
    >
      <div class="payment-methods">
        <el-radio-group v-model="selectedPayment" class="payment-options">
          <el-radio label="wechat" border class="payment-option-radio">
            <div class="payment-option">
              <el-icon :size="24" color="#07C160"><ChatDotRound /></el-icon>
              <span>微信支付</span>
            </div>
          </el-radio>
          <el-radio label="alipay" border class="payment-option-radio">
            <div class="payment-option">
              <el-icon :size="24" color="#1677FF"><Money /></el-icon>
              <span>支付宝</span>
            </div>
          </el-radio>
        </el-radio-group>

        <div class="qrcode-container" v-if="selectedPayment">
          <div class="qrcode-wrapper">
            <div class="qrcode-mask" v-if="!isPaid">
              <div class="qrcode-mask-content">
              </div>
            </div>
            <img
                v-if="selectedPayment === 'wechat'"
                src="../../../assets/images/微信二维码.jpg"
                alt="微信支付二维码"
                class="qrcode-img"
            />
            <img
                v-else-if="selectedPayment === 'alipay'"
                src="../../../assets/images/支付宝收款码.png"
                alt="支付宝二维码"
                class="qrcode-img"
            />
          </div>
          <div class="payment-info">
            <p class="amount-text">支付金额: <span>{{ form.amount }}</span> 元</p>
            <p class="payment-tip">请使用{{ selectedPayment === 'wechat' ? '微信' : '支付宝' }}扫码支付</p>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="payDialogVisible = false" class="cancel-btn">取消</el-button>
          <el-button
              type="primary"
              @click="confirmPayment"
              :disabled="!selectedPayment"
              class="confirm-btn"
              :loading="isPaying"
          >
            确认支付
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatDotRound, Money, View } from '@element-plus/icons-vue'
import request from "@/utils/request";

// 表单数据
const form = ref({
  amount: null
})

// 快捷金额选项
const quickAmounts = ref([10, 50, 100, 200, 500])

// 支付弹窗控制
const payDialogVisible = ref(false)
const selectedPayment = ref('')
const isPaying = ref(false)
const isPaid = ref(false)

// 处理充值按钮点击
const handleRecharge = () => {
  if (!form.value.amount || form.value.amount <= 0) {
    ElMessage.warning('请输入有效的充值金额')
    return
  }

  payDialogVisible.value = true
  selectedPayment.value = ''
  isPaid.value = false
}

// 确认支付
const confirmPayment = async () => {
  ElMessageBox.confirm(
      `确认使用${selectedPayment.value === 'wechat' ? '微信支付' : '支付宝'}支付 ${form.value.amount} 元吗?`,
      '支付确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'payment-confirm-dialog'
      }
  ).then(async () => {
    isPaying.value = true

    try {
      let data = new FormData();
      data.append("money", form.value.amount)

      const res = await request.post("/api/user/recharge", data)
      if(res.code === 200){
        isPaid.value = true
        setTimeout(() => {
          payDialogVisible.value = false
          ElMessage.success({
            message: '充值成功！',
            duration: 2000,
            showClose: true,
            customClass: 'success-message'
          })
          form.value.amount = null
          isPaying.value = false
        }, 1000)
      }
      else{
        ElMessage.error({
          message: "充值失败，请稍后再试",
          duration: 2000,
          showClose: true
        })
        isPaying.value = false
      }
    } catch (error) {
      ElMessage.error({
        message: "支付过程中发生错误",
        duration: 2000,
        showClose: true
      })
      isPaying.value = false
    }
  }).catch(() => {
    // 用户取消支付
    ElMessage.info('已取消支付')
  })
}
</script>

<style scoped lang="scss">
.recharge-container {
  max-width: 680px;
  margin: 30px auto;
  padding: 0 20px;
}

.recharge-card {
  padding: 30px;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  :deep(.el-card__header) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px;
  }
}

.card-header {
  display: flex;
  flex-direction: column;

  .header-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
  }

  .header-subtitle {
    font-size: 14px;
    color: #888;
    font-weight: normal;
  }
}

.amount-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.amount-input {
  width: 200px;

  :deep(.el-input__inner) {
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }

  :deep(.el-input-number__increase),
  :deep(.el-input-number__decrease) {
    height: 21px;
  }
}

.unit {
  margin-left: 5px;
  color: var(--el-text-color-regular);
  font-size: 16px;
}

.quick-amounts {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.quick-amount-tag {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &.active {
    background-color: var(--el-color-primary);
    color: white;
    border-color: var(--el-color-primary);
  }
}

.recharge-btn {
  width: 200px;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--el-color-primary), #66b1ff);
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 177, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

.payment-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-right: 0;
  }

  :deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
  }

  :deep(.el-dialog__body) {
    padding: 25px 30px;
  }

  :deep(.el-dialog__footer) {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 20px;
  }
}

.payment-methods {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-options {
  margin-bottom: 25px;
  display: flex;
  gap: 15px;

  :deep(.el-radio) {
    margin: 0;
  }
}

.payment-option-radio {
  :deep(.el-radio__input) {
    display: none;
  }

  :deep(.el-radio__label) {
    padding-left: 0;
  }

  :deep(.is-bordered) {
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
  }

  :deep(.is-checked) {
    border-color: var(--el-color-primary);
    background-color: rgba(64, 158, 255, 0.05);
  }
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.qrcode-container {
  text-align: center;
  margin-top: 15px;
  width: 100%;
}

.qrcode-wrapper {
  border: 1px solid var(--el-border-color-light);
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 20px;
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.qrcode-img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 4px;
}

.qrcode-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  border-radius: 8px;

  p {
    margin-top: 10px;
    font-size: 14px;
  }
}

.payment-info {
  margin-top: 15px;

  .amount-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;

    span {
      color: var(--el-color-primary);
      font-weight: bold;
      font-size: 22px;
    }
  }

  .payment-tip {
    font-size: 14px;
    color: #888;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;

  .cancel-btn {
    padding: 10px 20px;
    border-radius: 6px;
  }

  .confirm-btn {
    padding: 10px 20px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--el-color-primary), #66b1ff);
    border: none;
  }
}
</style>

<style lang="scss">
.payment-confirm-dialog {
  :deep(.el-message-box__header) {
    padding: 20px 20px 10px;
  }

  :deep(.el-message-box__title) {
    font-size: 18px;
    font-weight: 600;
  }

  :deep(.el-message-box__content) {
    padding: 20px;
    font-size: 16px;
  }

  :deep(.el-message-box__btns) {
    padding: 10px 20px 20px;
  }
}

.success-message {
  :deep(.el-message__content) {
    font-size: 16px;
  }
}
</style>
